<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>事件委托</h1>
    <p>如果页面中标签非常多，每一个标签都去绑定事件处理函数，会造成内存资源浪费。</p>
    <p>通过事件委托机制，可以有效地减少绑定事件的标签。</p>
    <p>我们只需要给父（祖先）元素绑定事件，然后判断事件源是哪一个标签，然后做不同的处理就可以了。</p>
    <h2>传统方式</h2>
    <ul class="ul1">
        <li class="li1">吃饭</li>
        <li class="li2">睡觉</li>
        <li class="li3">打豆豆</li>
    </ul>
    <h2>委托方式</h2>
    <ul class="ul2">
        <li class="li1">吃饭</li>
        <li class="li2">睡觉</li>
        <li class="li3">打豆豆</li>
    </ul>
    <script>
        function eat() {
            console.log("吃饭");
        }

        function sleep() {
            console.log("睡觉");
        }

        function beatBeanBean() {
            console.log("打豆豆");
        }

        let lis = document.querySelectorAll(".ul1>li");
        lis[0].onclick = eat;
        lis[1].onclick = sleep;
        lis[2].onclick = beatBeanBean;

        // 委托方式，只需要把事件绑定在父（祖先）元素上面
        let ul2 = document.querySelector(".ul2");
        ul2.onclick = function(e) {
            let dom = e.target;
            switch (dom.className) {
            case "li1": eat(); break;
            case "li2": sleep(); break;
            case "li3": beatBeanBean(); break;
            } 
        }

    </script>
</body>
</html>